// 垂直末端标记进度条
import QtQuick 2.15

Item {
    id: root
    
    property real value: 0
    property real minimum: 0
    property real maximum: 100
    property real progress: Math.max(0, Math.min(1, (value - minimum) / (maximum - minimum)))
    
    property color startColor: "#2B4AFF"
    property color endColor: "#FF42D5"
    property color backgroundColor: "#FFFFFF"
    property real backgroundOpacity: 0.2
    
    Rectangle {
        id: background
        anchors.fill: parent
        radius: height / 2
        color: backgroundColor
        opacity: backgroundOpacity
    }
    
    // 基础进度条部分（左侧圆角，右侧无圆角）
    Item {
        id: baseProgress
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: {
            var w = parent.width * progress;
            var r = parent.height / 2;
            // 如果进度超过需要垂直末端的阈值，留出垂直末端的空间
            if (w > parent.width - r * 2) {
                // 确保总宽度不超过parent.width
                return Math.max(0, parent.width - r * 2);
            }
            return w;
        }
        
        Canvas {
            anchors.fill: parent
            
            onPaint: {
                var ctx = getContext("2d");
                if (!ctx) return;
                
                var width = parent.width;
                var height = parent.height;
                var radius = height / 2;
                
                // 创建水平渐变
                var gradient = ctx.createLinearGradient(0, 0, width, 0);
                gradient.addColorStop(0.0, startColor);
                gradient.addColorStop(1.0, endColor);
                
                // 绘制：左侧圆角，右侧直角
                ctx.beginPath();
                ctx.moveTo(radius, 0);
                ctx.lineTo(width, 0);  // 顶部右侧直角
                ctx.lineTo(width, height);  // 右侧垂直边
                ctx.lineTo(radius, height);  // 底部右侧直角
                ctx.quadraticCurveTo(0, height, 0, height - radius);  // 左下圆角
                ctx.lineTo(0, radius);  // 左侧垂直边
                ctx.quadraticCurveTo(0, 0, radius, 0);  // 左上圆角
                ctx.closePath();
                
                ctx.fillStyle = gradient;
                ctx.fill();
            }
            
            onWidthChanged: requestPaint();
            onHeightChanged: requestPaint();
        }
    }
    
    // 垂直末端部分（有圆角）
    Rectangle {
        id: verticalEnd
        anchors.left: baseProgress.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: {
            var w = parent.width * progress;
            var r = parent.height / 2;
            var baseWidth = baseProgress.width;
            
            // 计算垂直末端的宽度：总进度宽度 - 基础部分宽度
            var endWidth = w - baseWidth;
            // 确保不超过圆形末端的最大宽度（r * 2），也不超过剩余空间
            endWidth = Math.min(endWidth, r * 2);
            endWidth = Math.min(endWidth, parent.width - baseWidth);
            return Math.max(0, endWidth);
        }
        visible: width > 0
        radius: height / 2  // 有圆角
        
        gradient: Gradient {
            orientation: Gradient.Horizontal  // 水平方向（从左往右）
            GradientStop { position: 0.0; color: startColor }
            GradientStop { position: 1.0; color: endColor }
        }
    }
}

